<template>
  <div class="p10" style="background-color: #e7e7e7;height:100vh">
    <div class="flex">
      <div class="w250">
        <h2 class="mb20">目录</h2>
        <div v-for="item in listMenu" :key="item.path" class="h40 fs16" @click="setActiveMenu(item)" :title="item.name">
          <div :class="currActiveMenu.path===item.path?'pointer bold':'pointer'" :style="{color:currActiveMenu.path===item.path?'#3072ee':''}">{{ item.path }}</div>
        </div>
      </div>
      <div class="flex-1 mt30">
        <h1>{{ currActiveMenu.path }}</h1>
        <h3 class="mt10 mb10">{{ currActiveMenu.name }}</h3>
        <a :href="`https://vueuse.org/${currActiveMenu.type}/${currActiveMenu.path}/`" target="_blank">官方文档地址：{{ `https://vueuse.org/${currActiveMenu.type}/${currActiveMenu.path}` }}</a>
        <div class="mt20">
          <h4 class="mb20">操作示例：</h4>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue';
import { listMenu } from './data.js';
import { useRoute, useRouter } from 'vue-router';

export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    const router = useRouter();
    const route = useRoute();
    function initState() {
      return {
        currActiveMenu: {},
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      state.currActiveMenu = listMenu.filter(t => '/' + t.path === route.fullPath)[0];
    });
    function setActiveMenu(item) {
      state.currActiveMenu = item;
      router.push('/' + item.path);
    }
    return {
      ...toRefs(state),
      setActiveMenu,
      listMenu,
    };
  },
};
</script>